<template>
  <div class="app-container">
    <!--<el-header>-->
      <!--&lt;!&ndash;表头工具栏&ndash;&gt;-->
      <!--<div class="handle-box">-->
        <!--<span>FUSER:</span>-->
        <!--&lt;!&ndash;可支持搜索&ndash;&gt;-->
        <!--<el-select v-model="fuserValue" filterable placeholder="请选择" @change="getFilterData" style="width: 100px;">-->
          <!--<el-option v-for="item in fuserids" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
        <!--</el-select>-->
        <!--<span>检索类型:</span>-->
        <!--<el-select v-model="searchValue" filterable placeholder="请选择" @change="getFilterData" style="width: 100px;">-->
          <!--<el-option v-for="item in this.v_TagTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
        <!--</el-select>-->
        <!--<span>标签编码:</span>-->
        <!--<el-input v-model="tagIDValue" aria-placeholder="请输入内容" maxlength=4 @input="getFilterData" style="width: 100px;"></el-input>-->
        <!--&lt;!&ndash;<el-button type="primary" icon="el-icon-search" @click="searchData">搜索</el-button>&ndash;&gt;-->
        <!--<el-button type="primary" icon="el-icon-bell" @click="sendDownAlarm">下发告警</el-button>-->
        <!--<el-button type="primary" icon="el-icon-circle-plus" @click="leadingInData">导入</el-button>-->
        <!--<el-button type="primary" icon="el-icon-circle-plus-outline" @click="addData">添加</el-button>-->
        <!--<el-button type="primary" icon="el-icon-delete" @click="deleteAll">批量删除</el-button>-->
      <!--</div>-->
    <!--</el-header>-->
   
      <!--表格-->
      <el-table class="datalist" :header-cell-style="tableHeaderColor" :data="tableData" :height="tableHeight" ref="multipleTable" @selection-change="handleSelectionChange">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item :label="$t('tag.hardware')">
                <span>{{ props.row.hardware }}</span>
              </el-form-item>
              <el-form-item :label="$t('tag.runningInfoSleepTs')">
                <span>{{ props.row.runningInfoSleepTs }}</span>
              </el-form-item>
              <el-form-item :label="$t('tag.firstFindVbat')">
                <span>{{ props.row.firstFindVbat }}</span>
              </el-form-item>
              <el-form-item :label="$t('tag.rtInfoRest')">
                <span>{{ props.row.rtInfoRest }}</span>
              </el-form-item>
              <el-form-item :label="$t('tag.rtInfoMeMode')">
                <span>{{ props.row.rtInfoMeMode }}</span>
              </el-form-item>
              <el-form-item :label="$t('tag.runningSummaryRegCount')">
                <span>{{ props.row.runningSummaryRegCount }}</span>
              </el-form-item>
              <el-form-item :label="$t('tag.runningSummaryTimingWork')">
                <span>{{ props.row.runningSummaryTimingWork }}</span>
              </el-form-item>
              <el-form-item :label="$t('tag.runningSummaryTrackcountTotal')">
                <span>{{ props.row.runningSummaryTrackcountTotal }}</span>
              </el-form-item>
              <el-form-item :label="$t('tag.runningSummaryTrackcountValid')">
                <span>{{ props.row.runningSummaryTrackcountValid }}</span>
              </el-form-item>
              <el-form-item :label="$t('tag.firmwareBle')">
                <span>{{ props.row.firmwareBle }}</span>
              </el-form-item>
              <el-form-item :label="$t('tag.firmwareUwb')">
                <span>{{ props.row.firmwareUwb }}</span>
              </el-form-item>
              <!--<el-form-item label="最近一次休眠时间">-->
                <!--<span>{{ props.row.runningInfoSleepTs }}</span>-->
              <!--</el-form-item>-->
              <el-form-item :label="$t('tag.runningInfoMeTs')">
                <span>{{ props.row.runningInfoMeTs }}</span>
              </el-form-item>
              <el-form-item :label="$t('tag.runningSummaryTimingSleep')">
                <span>{{ props.row.runningSummaryTimingSleep }}</span>
              </el-form-item>
              <!--<el-form-item label="休眠时长">-->
                <!--<span>{{ props.row.runningSummaryTimingWork }}</span>-->
              <!--</el-form-item>-->
              <el-form-item :label="$t('tag.runningSummaryRangingcountValid')">
                <span>{{ props.row.runningSummaryRangingcountValid }}</span>
              </el-form-item>
              <el-form-item :label="$t('tag.runningSummaryRangingcountFailed')">
                <span>{{ props.row.runningSummaryRangingcountFailed }}</span>
              </el-form-item>
              <el-form-item :label="$t('tag.createTime')">
                <span>{{ props.row.createTime }}</span>
              </el-form-item>
              <el-form-item :label="$t('tag.creator')">
                <span>{{ props.row.creator }}</span>
              </el-form-item>
              <el-form-item :label="$t('tag.updateTime')">
                <span>{{ props.row.updateTime }}</span>
              </el-form-item>
              <el-form-item :label="$t('tag.updator')">
                <span>{{ props.row.updator }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <!--标签ID-->
        <el-table-column prop="tagId" :label="$t('tag.tagId')" min-width="120"></el-table-column>
        <!--引擎ID-->
        <el-table-column prop="lcId" :label="$t('tag.lcId')" min-width="150"></el-table-column>
        <!--标签状态-->
        <el-table-column prop="state" :label="$t('tag.state')" :formatter="tagState" min-width="80"></el-table-column>
        <!--固件版本-uwb-->
        <el-table-column prop="hardware" :label="$t('tag.hardware')" min-width="100"></el-table-column>
        <!--工作模式-->
        <el-table-column prop="rtInfoMeMode" :formatter="rtInfoMeMode" :label="$t('tag.rtInfoMeMode')" min-width="150"></el-table-column>
        <!--电池电量-->
        <el-table-column prop="rtInfoVbat" :label="$t('tag.rtInfoVbat')" min-width="80"></el-table-column>
        <!--首次上线时间-->
        <el-table-column prop="firstFindTs" :label="$t('tag.firstFindTs')" min-width="150"></el-table-column>
        <!--时隙索引-->
        <el-table-column prop="rtInfoSyncSlot" :label="$t('tag.rtInfoSyncSlot')"></el-table-column>
        <el-table-column :label="$t('operating.operating')" width="280">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleOperation(scope.$index, scope.row, '1')" :disabled="scope.row.state===0">{{$t('tag.upgrade')}}</el-button>
            <el-button size="mini" type="warning" @click="handleOperation(scope.$index, scope.row, '2')" :disabled="scope.row.state===0">{{$t('tag.Restart')}}</el-button>
            <el-button size="mini" type="danger" @click="handleOperation(scope.$index, scope.row, '3')" :disabled="scope.row.state===0">{{$t('tag.Reset')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10,25, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total= this.total>
        </el-pagination>
      </div>
  
  </div>
</template>
<script>
   const TagManageUrl = "http://192.168.3.92:8002";
  import Cookie from 'js-cookie';
  export default {
    data() {
      return {
        /*********************表格相关*********************/
        tableHeight: window.innerHeight - 240,
        tableData: [],//表格模拟数据
        currentPage:1,//当前所在页
        total:0,//总页数
        pageSize:'10',//
        operationParam: {
          type: "",
          deviceId: ""
        }
      }
    },
    //  已经完成模板渲染或者el对应的html渲染后
    mounted() {
      this.windowRefresh();
      let self = this;
      window.onresize = function temp() {
        self.windowRefresh();
      };

      this.getData();
    },

    methods: {
      //刷新窗口
      windowRefresh: function() {

        this.tableHeight = window.innerHeight - 250;
      },
      //格式转换
      tagState(row, column){
        if(row.state ==0){
          return '离线'
        }else if(row.state ==1){
          return '在线'
        }
      },
      // 修改table header的背景色
      tableHeaderColor({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'color:#1f59ad;'
        }
      },
      //工作模式.
      rtInfoMeMode(row, column){
        if(row.rtInfoMeMode ==0){
          return '未设置'
        }else if(row.rtInfoMeMode ==1){
          return 'tdoa'
        }else if(row.rtInfoMeMode ==2){
          return '在线'
        }
      },
      // //格式转换
      // timeChange(row, column){
      //   return this.timeConvert(row.firstFindTs)
      // },
      getData(){
        let param ={
          "pageNum":this.currentPage,
          "pageSize":this.pageSize,
        };
        this.$api.tagmanage.getListData(TagManageUrl,param).then(res => {
          let RES = this.responseUse(res);
          this.total = RES.totalSize;
          this.tableData = RES.content;
        })
      },
      //分页导航
      handleSizeChange(val) {
        this.pageSize = val;
        this.getData();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getData();
      },
      handleSelectionChange(val){
        this.multipleSelection = val;
        // console.log(this.multipleSelection);
      },
      //行操作按钮响应
      handleOperation(index, row, type) {
        if (row.tagId === null || row.tagId === "") {
          this.v_MyMessage(this.$t('operating.operationFailed'));
          return;
        }
        this.operationParam.deviceId = row.tagId
        this.operationParam.type = type
        this.$api.tagmanage.operationTag(TagManageUrl, this.operationParam).then(res => {
          let RES = this.responseUse(res, true);
          if (RES) {
            this.getData();
          }
        })
      }
    }
  }
</script>
<style scoped>
</style>

